<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				height: 100vw;
			}
			body:active::after {
				transform: translate(-50%, -100%);
				opacity: 0.5;
				transition: 0s;
				left: -999px;
			}
			body::after {
				content: '666';
				position:fixed;
				z-index: 999;
				left: calc(var(--clientx, -999) * 1px);
				top: calc(var(--clienty, -999) * 1px);
				transform: translate(-50%, calc(-100% - 20px));
				opacity: 0;
				transition: transform .3s, opacity .5s;
			}

			
			/* 侧边 */
			
			.yw-tab-tab {
				position: relative;
				display: flex;
				max-width: 414px;
				justify-content: space-between;
				border-bottom: 1px solid #717678;
				background-color: #fff;
				margin: 30px auto;
			}
			.yw-tab-tab::before,
			.yw-tab-tab::after {
				position: absolute;
				width: calc(var(--target-width, 0) * 1px);
				left: calc(var(--target-left, -299) * 1px);
				color: #2a80eb;
			}
			.yw-tab-tab[style]::before,
			.yw-tab-tab[style]::after  {
				content: '';
			}
			.yw-tab-tab::before {
				background-color: currentColor;
				height: calc(var(--target-height) * 1px);
				mix-blend-mode: overlay;
			}
			.yw-tab-tab::after {
				border-bottom: solid;
				bottom: -2px;
				transition: left .2s, width .2s;
			}
			.yw-tab-a {
				color: #717678;
				padding: 10px 0;
			}
			
			
			
			/* 三角形 */
			
			.select {
			    border:1px solid #e3e3e3;    
			    border-radius:3px;
			    color:#616263;
			    overflow: hidden; 
			    height: 40px;    
			    width: 240px;
			    position: relative;
			    display: block;
			}
			
			select{       
			    height: 40px;
			    padding: 5px;
			    background-color:#ececec;
			    border: 0;
			    outline: none;
			    font-size: 16px;       
			    width: 240px;
			   -webkit-appearance: none;
			    -moz-appearance: none;
			    appearance: none;
			}
			.select:after {
				content:">";
				transform: rotate(90deg);
				font-family: '宋体';
				padding: 12px 8px;
				position: absolute; right: 10px; top: 0;
				z-index: 1;
				text-align: center;
				width: 10%;
				height: 100%;
				pointer-events: none;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		
		
		<div class="select">
			<select name="select">
				<option>select</option>
				<option>option</option>
				<option>option</option>
				<option>option</option>
				<option>option</option>
				<option>option</option>
				<option>option</option>
			</select>
		</div>
		
		
		<div class="yw-tab-tab"> 
		  <a href="javascript:" class="yw-tab-a">QQ阅读</a>
		  <a href="javascript:" class="yw-tab-a">起点读书</a>
		  <a href="javascript:" class="yw-tab-a">红袖读书</a>
		  <a href="javascript:" class="yw-tab-a">飞读免费小说</a>
		</div>
		
		
		<script type="text/javascript">
			document.addEventListener('mousedown', function (e) {
			    var target = e.target;
			    var body = document.body;
			    var html = document.documentElement;
			
			    // 设置自定义属性值
			    body.style.setProperty('--pagex', e.pageX);
			    body.style.setProperty('--pagey', e.pageY);
			
			    html.style.setProperty('--clientx', e.clientX);
			    html.style.setProperty('--clienty', e.clientY);
			    html.style.setProperty('--scrolly', window.pageYOffset);
				
			    target.style.setProperty('--x', e.offsetX+'px');
			    target.style.setProperty('--y', e.offsetY+'px');
			    target.parentElement.style.setProperty('--target-width', target.clientWidth);
			    target.parentElement.style.setProperty('--target-height', target.clientHeight);
			    target.parentElement.style.setProperty('--target-left', target.offsetLeft);
			    target.parentElement.style.setProperty('--target-top', target.offsetTop);
			});
			
			
		</script>
	</body>
</html>
